<template>
  <div class="text-black">

  </div>

<!--  <q-uploader-->
<!--      url="http://localhost:4444/upload"-->
<!--      label="Upload your artwork ( less than 10MB per file )        Max number of files (3)"-->
<!--      multiple-->
<!--      max-files="3"-->
<!--      max-file-size="2048"-->
<!--      @rejected="onRejected"-->
<!--  />-->

  <q-uploader
      ref="uploaderRef"
      multiple
      hide-upload-btn
      :auto-upload="false"
      label="Upload your artwork ( less than 10MB per file ), Max number of files (3)"
      max-files="3"
      color="purple"
      max-file-size="10485760"
  >
    <template v-slot:list="scope">
      <q-list separator>

        <q-item v-for="file in scope.files" :key="file.__key">
          <q-item-section>
            <q-item-label class="full-width ellipsis">
              {{ file.name }}
            </q-item-label>

            <q-item-label caption>
              Status: {{ file.__status }}
            </q-item-label>

            <q-item-label caption>
              {{ file.__sizeLabel }} / {{ file.__progressLabel }}
            </q-item-label>
          </q-item-section>

          <q-item-section
              v-if="file.__img"
              thumbnail
              class="gt-xs"
          >
            <img :src="file.__img.src">
          </q-item-section>

          <q-item-section top side>
            <q-btn
                class="gt-xs"
                size="12px"
                flat
                dense
                round
                icon="delete"
                @click="scope.removeFile(file)"
            />
          </q-item-section>
        </q-item>

      </q-list>
    </template>
  </q-uploader>
</template>

<script setup lang='ts'>
import {defineProps, defineEmits, defineExpose, ref} from 'vue'

defineProps({})

const uploaderRef = ref(null);

const cleanFile = () => {
  uploaderRef.value.files = []
}

const emit = defineEmits([])

defineExpose({cleanFile, uploaderRef})
</script>

<style scoped lang='less'>
.q-uploader{
  width: 98%;
}
:deep(.q-uploader__file--img){
  height: 400px;
}
</style>